<template>
  <div class="product">
    <product-param :title="productDetail.name">
      <template v-slot:buy>
        <button class="btn" @click="$router.push(`/detail/${productId}`)">立即购买</button>
      </template>
    </product-param>
    <div class="content">
      <div class="container">
        <h2>{{productDetail.name}}</h2>
        <h3>{{productDetail.subtitle}}</h3>
        <p>
          <a href="" id="">全球首款双频 GP</a>
          <span>|</span>
          <a href="" id="">骁龙845</a>
          <span>|</span>
          <a href="" id="">AI 变焦双摄</a>
          <span>|</span>
          <a href="" id="">红外人脸识别</a>
        </p>
        <div class="price">￥{{productDetail.price}}</div>
      </div>
    </div>
    <div class="swiper-box">
        <swiper :options="swiperOptions">
          <swiper-slide><img src="/imgs/product/gallery-2.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-3.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-4.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-5.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-6.jpg" alt=""></swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="item-video">
        <h2>60帧超慢动作摄影<br/>慢慢回味每一瞬间的精彩</h2>
        <p>后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br/>更能AI 精准分析视频内容，15个场景智能匹配背景音效。</p>
        <div class="video-bg" @click="startVideo"></div>
        <div class="video-box" v-show="showVideo">
          <div class="overlay"></div>
          <div class="video" :class="showVideo">
            <span class="icon-close" @click="closeVideo"></span>
            <video src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11ultra/section3-2.mp4" muted autoplay controls="controls"></video>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { getOneProduct } from './../../util/request.js'
  import ProductParam from '../../components/ProductParam.vue'
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  export default {
    data() {
      return {
        showVideo: '',
        swiperOptions:{
          slidesPerView: 3,
          spaceBetween: 30,
          freeMode: true,
          autoplay: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          }
        },
        // 商品详情
        productDetail: {},
        // 商品ID
        productId: this.$route.params.id
      }
    },
    components: {
      ProductParam,
      Swiper,
      SwiperSlide
    },
    methods: {
      getProductDetail() {
        let id = this.productId
        getOneProduct(id).then(res => {
          this.productDetail = res
          console.log(this.productDetail)
        }, error => {
          this.$message.error(error)
        })
      },
      startVideo() {
        this.showVideo = 'slideDown'
        console.log(this.showVideo)
      },
      closeVideo() {
        this.showVideo = 'slideUp'
        let video = document.getElementsByTagName('video')[0]
        video.pause()
        setTimeout(() => {
          this.showVideo = ''
        }, 500);
      }
    },
    mounted() {
      this.getProductDetail()
    }
  }
</script>

<style lang='scss' scoped>
@import './../../assets/scss/config.scss';
@import './../../assets/scss/button.scss';
@import './../../assets/scss/mixin.scss';
.product{
  .content{
    @include bgImg(100%,718px,'/imgs/product/product-bg-1.png',auto);
    .container{
      text-align: center;
      padding-top: 80px;
      h2{
        font-size: 80px;
      }
      h3{
        font-size: 24px;
        letter-spacing: 24px;
      }
      p{
        margin-top: 21px;
        font-size: 16px;
        a{
          margin: 0 14px;
          color: #333;
        }
      }
      .price{
        font-size: 38px;
        margin-top: 40px;
      }
    }
  }
  .swiper-box{
    margin: 36px 0;
    height: 365px;
    img{
      width: 625px;
      height: 356px;
    }
  }
  .item-video{
        height:1044px;
        background-color:#070708;
        margin-bottom:76px;
        color:#FFFFFF;
        text-align:center;
        h2{
          font-size:60px;
          padding-top:82px;
          margin-bottom:47px;
        }
        p{
          font-size:24px;
          margin-bottom:58px;
        }
        .video-bg{
          background:url('/imgs/product/gallery-1.png') no-repeat center;
          background-size:cover;
          width:1226px;
          height:540px;
          margin:0 auto 120px;
          cursor:pointer;
        }
        .video-box{
          .overlay{
            @include position(fixed);
            background: #000;
            opacity: .4;
            z-index: 10;
          }
          @keyframes slideDown {
            from{
              top: -50%;
            }
            to{
              top: 50%;
            }
          }
          @keyframes slideUp{
            from{
              top: 50%;
            }
            to{
              top: -50%;
            }
          }
          .video{
            position: fixed;
            z-index: 11;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 1000px;
            height: 536px;
            .icon-close{
              position:absolute;
              top:20px;
              right:20px;
              @include bgImg(20px,20px,'/imgs/icon-close.png');
              cursor:pointer;
              z-index:11;
            }
            &.slideDown{
              animation: slideDown .5s;
            }
            &.slideUp{
              animation: slideUp .5s;
            }
            video{
              width: 100%;
              height: 100%;
              object-fit: cover;
              outline:none;
            }
          }
        }
        
      }
}
</style>